import { ref, reactive, shallowRef } from 'vue';
import echarts from '@/echarts';
import { EChartsOption } from 'echarts';
import { EChartsType } from 'echarts/core';
import type { LineBarChartType } from '../data';

import { getHtmlFontPX, handleChartResize } from '@/utils/base';
import { useAutoTooltip } from '@/utils/echartsAutoTooltip';
import ThemeColor from '@/themeColor';
import { colorList } from '../config';

export default function (): LineBarChartType {
  const chartRef = shallowRef<EChartsType>();
  const container = ref<HTMLDivElement | undefined>();
  const chart = reactive<LineBarChartType['chart']>({
    selectValue: [4, 8, 9],
    initChart,
    resizeChart
  });

  /**
   * @returns 返回option配置
   */
  function getOption() {
    const option: EChartsOption = {
      color: colorList,
      textStyle: {
        color: ThemeColor.chartFontColor
      },
      tooltip: {
        position: 'left',
        show: true,
        formatter: `{a}<br/>{b}:{c}条({d}%)`
      },
      legend: {
        orient: 'vertical',
        top: 0,
        right: 12,
        textStyle: {
          color: '#fff'
        }
      },
      // containLabel 为 true 的时候：
      // grid.left grid.right grid.top grid.bottom grid.width grid.height 决定的是包括了坐标轴标签在内的所有内容所形成的矩形的位置。
      // 这常用于『防止标签溢出』的场景，标签溢出指的是，标签长度动态变化时，可能会溢出容器或者覆盖其他组件。
      grid: {
        top: '20%',
        left: '5%',
        right: '5%',
        bottom: '5%',
        containLabel: true
      },
      xAxis: {
        type: 'category',
        axisLabel: {
          show: false
        },
        axisLine: {
          show: false
        },
        axisTick: {
          show: false
        }
      },
      yAxis: { type: 'value' },
      series: []
    };
    return option;
  }

  /**
   * 初始化图表
   * @param container 图表容器id
   */
  function initChart(initData: any): any {
    if (!container.value) return;
    const option = getOption();
    option.series = [
      {
        name: '情感占比',
        type: 'pie',
        center: ['50%', '50%'],
        radius: ['40%', '60%'],
        avoidLabelOverlap: false,
        itemStyle: {
          borderRadius: 4
        },
        emphasis: {
          itemStyle: {
            shadowBlur: 10,
            shadowOffsetX: 0,
            shadowColor: 'rgba(0, 0, 0, 0.5)'
          }
        },
        label: {
          textShadowColor: '#fff',
          formatter: params => {
            if (params.name == '正面') {
              return '{a|' + params.percent + '%}';
            } else if (params.name == '中性') {
              return '{b|' + params.percent + '%}';
            } else if (params.name == '负面') {
              return '{c|' + params.percent + '%}';
            } else {
              return '{c|' + params.value + '条 ' + params.percent + '%}';
            }
          },
          rich: {
            a: {
              color: '#FFC900',
              align: 'left',
              padding: 4
            },
            b: {
              color: '#5DDEE6',
              align: 'left',
              padding: 4
            },
            c: {
              color: '#4292FF',
              align: 'left',
              padding: 4
            }
          }
        },
        data: initData || [
          {
            name: '正面',
            value: 10
          },
          {
            name: '中性',
            value: 20
          },
          {
            name: '负面',
            value: 5
          }
        ]
      }
    ];
    chartRef.value = echarts.init(container.value);
    chartRef.value && chartRef.value.setOption(option);

    // 添加自动轮播功能
    if (chartRef.value && option.series.length > 0) {
      const { start, stop } = useAutoTooltip(chartRef.value as unknown as any, {
        interval: 2500,
        seriesIndex: 0
      });

      // 延迟启动，确保图表渲染完成
      setTimeout(() => {
        start();
      }, 1000);

      // 存储停止函数，供组件卸载时调用
      chart.stopTooltip = stop;
      return stop;
    }
  }

  /**
   * @description 重新set一下resize后的字体 不然会有偏移
   */
  function resetFontSize() {
    const option = getOption();
    // 需要重新计算字体不然依旧会有点偏差
    chartRef.value && chartRef.value.setOption(option);
  }

  /**
   * @description 处理图表resize
   */
  function resizeChart() {
    if (chartRef.value) {
      handleChartResize(chartRef.value);
      resetFontSize();
    }
  }

  return {
    chart,
    container,
    chartRef,
    getOption
  };
}
